<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>贵州马达岭山体滑坡监测系统</title>
	<link rel="stylesheet" href="./css/style.css">

	<!--/*引入百度地图接口*/-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=G2iVDSiZBrDVpO1FWhiaDbGYZE8kQAlp"></script>
	<!--加载echarts-->
    <script src="./js/echarts.js"></script>
	<!--加载jquery-->
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
</head>
<body>
	<div class="top-bar">
		<div class="logo">
			<img src="imgs/logo.jpg" alt="" style="width: 100%;height: 100%">
		</div>

		<div class="title">
			贵州马达岭山体滑坡监测系统
		</div>

		<div class="user-info">
			<span>管理员：<?php echo "用户名 时间"?></span>
			<a href="">修改密码</a>
			<a href="">退出</a>
		</div>
	</div>

	<div class="middle">
		<ul>
			<li>
				<a href="index.html" class="left">
					<span>首页</span>
					<i class="iconfont icon-shouye"></i>
				</a>
			</li>
			<li>
				<a href="" class="left">
					<span>统计信息</span>
					<i class="iconfont icon-gengduo"></i>
				</a>
				<div></div>
			</li>
			<li>
				<a href="" class="left">
					<span>监测类型</span>
					<i class="iconfont icon-gengduo"></i>
				</a>
				<div></div>
			</li>
			<li>
				<a href="" class="left">
					<span>数据管理</span>
					<i class="iconfont icon-gengduo"></i>
				</a>
				<div></div>
			</li>
			
			<li>
				<a href="" class="left">
					<span>告警管理</span>
					<i class="iconfont icon-gengduo"></i>
				</a>
				<div>
					<ul>
						<li><a href="">设置阈值</a></li>
						<li><a href="">告警处理</a></li>
						<li><a href="">告警推送</a></li>
					</ul>
				</div>
			</li>
			<li>
				<a href="" class="left">
					<span>专家系统</span>
					<i class="iconfont icon-gengduo"></i>
				</a>
				<div>
					<ul>
						<li><a href="">预警模型</a></li>
						<li><a href="">系统诊断</a></li>
						<li><a href="">专家知识库</a></li>
					</ul>
				</div>
			</li>
			<li>
				<a href="" class="left">
					<span>日常管理</span>
					<i class="iconfont icon-gengduo"></i>
				</a>
				<div>
					<ul>
						<li><a href="device-management.html">设备管理</a></li>
						<li><a href="sensor-management.html">传感器管理</a></li>
						<li><a href="structure-management.html">结构管理</a></li>
					</ul>
				</div>
			</li>
			<li>
				<a href="" class="left">
					<span>系统管理</span>
					<i class="iconfont icon-gengduo"></i>
				</a>
				<div>
					<ul>
						<li><a href="">组织机构管理</a></li>
						<li><a href="">用户管理</a></li>
						<li><a href="">角色管理</a></li>
						<li><a href="">合同管理</a></li>
						<li><a href="">日志管理</a></li>
						<li><a href="">权限管理</a></li>
						<li><a href="">消息管理</a></li>
						<li><a href="">后台管理</a></li>
					</ul>
				</div>
			</li>
		</ul>

		<div class="page">
			<div class="device-info">

			</div>
			<!-- 地图 -->
			<div class="map">
				<div id="myMap"></div>
			</div>
			<!-- 裂缝计 -->
			<div class="fracture-meter">
				<div id="fracture-meter-line" style="width: 680px;height:400px;"></div>
			</div>
			
			<!-- 雨量 -->
			<div class="rain-bar">
				<div id="rain-bar" style="width: 680px;height:400px;"></div>
			</div>
			<!-- 倾斜 -->
			<div class="tiltmeter">
				<div id="tiltmeter" style="width: 680px;height:400px;"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var map = new BMap.Map("myMap");//创建地图实例
		var point = new BMap.Point(105.497722,25.608657);//创建点坐标 (105.497722,25.608657)该点是贵州马达岭的坐标
		map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
	    // map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
	    // map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
	    map.enableScrollWheelZoom();                                //启用滚轮放大缩小
	    map.addControl(new BMap.MapTypeControl());                  //添加地图类型控件
	    // map.disable3DBuilding();
		map.centerAndZoom(point,5);//初始化地图，设置中心点和地图级别
		//map.setMapStyle({style:'grayscale'});//设置地图类型
		var mapStyle={  style : "midnight" }  
		map.setMapStyle(mapStyle);

		//标点
        var gzmdl_marker = new BMap.Marker(point);
        map.addOverlay(gzmdl_marker);

		
		// 裂缝计
		var myChart = echarts.init(document.getElementById("fracture-meter-line"));
		option = {
			title: {
				text: '裂缝计',

				//设置标题颜色
				textStyle:{
					color:'#fff'
				}
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {

				data:[{
					name:'裂缝宽度',
					textStyle:{
					color:'#fff'
				    }
				}
				]
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: [],
				//设置坐标轴颜色
				axisLine:{
					lineStyle:{
						color:'#fff',
						width:1,
					}
				}
			},
			yAxis: {
				type: 'value',
				//设置坐标轴颜色
				axisLine:{
					lineStyle:{
						color:'#fff',
						width:1,
					}
				},
				min: 'dataMin'//设置最小值
			},
			series: [
				{
					name:'裂缝宽度',
					type:'line',
					stack: '总量',
					data:[]
				}
			]
		};
		
		//显示图表
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
		
		var local_date=[];
		var fracture_data=[];

		//数据加载完之前先显示一段简单的loading动画
		myChart.showLoading();  		
		$(function() {//文档就绪后执行
			$.ajax({
			url: 'crackmeter.php',
			type: 'POST',
			data: {},
			dataType: 'json',
			success: function (result) {

				$.each(result.temp,function(index,values){//接收Json数据，分别存入变量
					local_date.push(values.local_date);
					fracture_data.push(values.data);
				});
				//打印数据
				console.log(local_date);
				console.log(fracture_data);
				myChart.hideLoading(); //隐藏动画
				
				myChart.setOption({
					xAxis:{
					data:local_date
					},
					series:[{
					data:fracture_data
					}]
					});
				},        		
				error: function (errorMsg) {
				//请求失败时执行该函数
					alert("图表请求数据失败!");
					myChart.hideLoading();
				}
			});
		});


        // 雨量计
		var myChart_rainbar = echarts.init(document.getElementById("rain-bar"));
		option = {
			title:{
				text:'雨量计',
				//设置标题颜色
				textStyle:{
					color:'#fff'
				}
			},//标题
			tooltip:{trigger:'axis'},//提示

			legend:{
				data:[{
					name:'降水量',
					textStyle:{color:'#fff'}//设置legend颜色
				}],
			},//折线名

			toolbox:{
				show:true,//是否显示工具栏组件
				feature:{//各工具配置项。
					dataView : {show: true, readOnly: false},
					magicType : {show: true, type: ['line', 'bar']},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			calculable:true,//是否显示拖拽用的手柄
			
			
			xAxis : [
				{
					type : 'category',
					name : '时间',
					nameTextStyle:{
						color: '#fff'
					},
					axisTick: {
	                alignWithLabel: true
					},
					//设置坐标轴颜色
					axisLine:{
						lineStyle:{
							color:'#fff',
							width:1,
						}
					}
				}
			],
			yAxis : [
				{
					type : 'value',
					name : '单位：mm',
					nameTextStyle:{
						color: '#fff'
					},
					//设置坐标轴颜色
					axisLine:{
						lineStyle:{
							color:'#fff',
							width:1,
						}
					}
				}
			],
			series : [
				{
					name:'降水量',
					type:'bar',
					color:['#5ED5D1'],/*设置颜色*/
				}
			]
		};
		
		if (option && typeof option === "object") {
			myChart_rainbar.setOption(option, true);
		}
		var rain_date=[];
		var rain_data=[];
		//数据加载完之前先显示一段简单的loading动画
		myChart_rainbar.showLoading();  		
	$(function() {
		$.ajax({
        url: 'rain_json.php',
        type: 'POST',
        data: {},
        dataType: 'json',
        success: function (result) {

            $.each(result.user,function(index,values){
				rain_date.push(values.local_date);
				rain_data.push(values.data);
			});

			// console.log(rain_data);
			// console.log(rain_date);
			
			myChart_rainbar.hideLoading(); 
			myChart_rainbar.setOption({
				xAxis:{
				data:rain_date
				},
				series:{
				data:rain_data
				}
				});
			},        		
			error: function (errorMsg) {
            //请求失败时执行该函数
				alert("图表请求数据失败!");
				myChart_rainbar.hideLoading();
			}
		});
	});


	    var myChart_tiltmeter = echarts.init(document.getElementById("tiltmeter"));
        option = {
            title: {
                text: '倾斜计',
                //设置标题颜色
				textStyle:{
					color:'#fff'
				}
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[{
                	name:'倾斜角',
                	textStyle:{color:'#fff'}
                },
                {
                	name:'位移',
                	textStyle:{color:'#fff'}
                }]
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: {},
				//设置坐标轴颜色
				axisLine:{
					lineStyle:{
						color:'#fff',
						width:1,
					}
				}
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
				//设置坐标轴颜色
				axisLine:{
					lineStyle:{
						color:'#fff',
						width:1,
					}
				}
            },
            series: [
            {
                name:'倾斜角',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],

                markPoint: {
                    data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'位移',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],

            //设置折线图颜色
            itemStyle:{
                	normal:{
                		lineStyle:{
                			color:'#4ce4b7'
                		}
                	}
            },
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
};

        
        if (option && typeof option === "object") {
            myChart_tiltmeter.setOption(option, true);
        }
        var dataX=[];
        var dataY=[];
		var local_date=[];
        //数据加载完之前先显示一段简单的loading动画
        myChart_tiltmeter.showLoading();          
    $(function() {
        $.ajax({
        url: 'mytiltmeter.php',
        type: 'POST',
        data: {},
        dataType: 'json',
        success: function (result) {

            $.each(result.user,function(index,values){
                dataX.push(values.dataX);
                dataY.push(values.dataY);
				local_date.push(values.local_date);
            });

            console.log(dataX);
            console.log(dataY);
			console.log(local_date);
            
            myChart_tiltmeter.hideLoading(); 
            myChart_tiltmeter.setOption({
                xAxis:{
                data:local_date
                },
                series:[{
                data:dataY
                },
				{
					data:dataX
				}
				]
                });
            },              
            error: function (errorMsg) {
            //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart_tiltmeter.hideLoading();
            }
        });
    });

	</script>
</body>
</html>